<template>

  <div class>
    <template-table ref="template" :url="selUrl" :temInput="temInput" :temTable="temTable"
      @tableBtnClick="tableBtnClick" @inputBtnClick="inputBtnClick"></template-table>
    <exImport :visible.sync="exVisible" @extoggle="extoggleVisible"></exImport>
    <el-dialog title="客户详情" :visible.sync="dialogInfoVisible" width="80%" @close="closed">
      <el-row>
        <el-col :span="24">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first"> </el-tab-pane>
            <el-tab-pane label="账号管理" name="second" v-if="userinfoCode"> </el-tab-pane>
            <el-tab-pane label="银行卡信息" name="bankInfoList"> </el-tab-pane>
            <el-tab-pane label="地址管理" name="addressList"> </el-tab-pane>
            <el-tab-pane label="资金池账户" name="pooledAccounts"> </el-tab-pane>
            <el-tab-pane label="下级客户" name="subordinateCustomers"> </el-tab-pane>
            <el-tab-pane label="常购清单" name="frequentlyPurchasedList"> </el-tab-pane>
            <el-tab-pane label="备注" name="remark"> </el-tab-pane>
            <!-- <el-tab-pane label="优惠券" name="third"> </el-tab-pane>
            <el-tab-pane label="红包" name="fourth"> </el-tab-pane>
            <el-tab-pane label="积分" name="five"> </el-tab-pane> -->
            <!-- <el-tab-pane label="组织信息" name="six" v-if="userinfoCode"></el-tab-pane> -->
            <datail v-show="activeName == 'first'" :userInfo="rowInfo" :tabName="activeName" :data="basicInfo"></datail>
            <operaList v-show="activeName == 'second'" :tabName="activeName" :userinfoCode="userinfoCode"></operaList>
            <!-- 银行卡  -->
            <bankInfoList @closeFatherDilog="closeCurrDilog" v-show="activeName == 'bankInfoList'" :tabName="activeName"
              :userinfoCode="userinfoCode">
            </bankInfoList>
            <!-- 地址管理  -->
            <addressList v-show="activeName == 'addressList'" :tabName="activeName" :userinfoCode="userinfoCode">
            </addressList>

            <!-- 常购清单 -->
            <frequentlyPurchasedList v-show="activeName == 'frequentlyPurchasedList'" :tabName="activeName"
              :userinfoCode="userinfoCode">
            </frequentlyPurchasedList>
            <coupon v-show="activeName == 'third'" :userinfoCode="userinfoCode" :tabName="activeName"></coupon>
            <redpacket v-show="activeName == 'fourth'" :userinfoCode="userinfoCode" :tabName="activeName"></redpacket>
            <point v-show="activeName == 'five'" :userinfoCode="userinfoCode" :tabName="activeName"></point>
            <!-- <organization
              v-show="activeName == 'six'"
              :userinfoCode="userinfoCode"
              :tabName="activeName"
              :userinfoChannelName="userinfoChannelName"
            ></organization> -->
          </el-tabs>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 任务详情 -->
    <el-dialog title="任务详情" :visible.sync="dialogInfoVisible2" width="80%" @close="closed2">
      任务详情
    </el-dialog>

    <!-- 新增任务 -->
    <el-dialog title="新增任务" :visible.sync="dialogInfoVisible3" width="80%" @close="closed3">
      <!-- 基本信息 -->
      <div class="title1">|&nbsp;基本信息 </div>
      <div>
        <el-form :model="ruleForm" :rules="rules1" ref="refRuleForm1" label-width="130px">

          <el-form-item label="选择任务年份" prop="year">
            <!-- 下拉框选择器 -->
            <el-select v-model="ruleForm.year" @change="" placeholder="请选择年份" style="width: 150px">
              <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="选择经销商" prop="superiorDealer">
            <!-- 下拉框选择器 -->
            <el-select v-model="ruleForm.superiorDealer" @change="" placeholder="请选择经销商" style="width: 150px">
              <el-option v-for="item in superiorDealerList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="所属渠道" prop="radioValue">
            <!-- 单选框组 单选按钮组 -->
            <el-radio-group v-model="ruleForm.radioValue">
              <el-radio v-for="item in radioOption" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>

      <!-- 返利任务 -->
      <div class="title1">|&nbsp;返利任务 </div>
      <div>
        <el-form :model="ruleForm2" :rules="rules2" ref="refRuleForm2" label-width="130px">
          <el-form-item label="设置任务" prop="checkList">
            <!-- 多选框组、复选框组 -->
            <el-checkbox-group v-model="ruleForm2.checkList" @change="checkboxChange">
              <el-checkbox v-for="item in checkboxOptions" :key="item.value" :label="item.value"
                :disabled="item.disabled">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>

        <!-- 无序表格  -->
        <TableLee :SafetyTableData="SafetyTableData" :pointerEvents="pointerEvents" :showAddTableColBtn="false"
          :overflow="'auto'"></TableLee>
      </div>


      <!-- 不参与返利商品： -->
      <div class="title1">|&nbsp;不参与返利商品： </div>

      <div slot="footer">
        <div class="yesOrNot hr">
          <el-button size="small" @click="() => { dialogInfoVisible3 = false }">取消</el-button>
          <el-button size="small" type="primary" @click="addTask(['refRuleForm1', 'refRuleForm2'])">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TableLee from './TableLee.vue'
import templateTable from "#/views/templates/templateTable";
import globalAPI from '@/api/api.js'
import API from "@/api/dealer.js";
import bankInfoList from './component/bankInfoList.vue'
import addressList from './component/addressList.vue'
import frequentlyPurchasedList from './component/frequentlyPurchasedList.vue'
import datail from "./component/memDetaill";
import exImport from "./component/exImport";
import coupon from "./component/coupon";
import redpacket from "./component/redpacket";
import point from "./component/point";
import organization from "./component/organization";
import { parseTime } from '#/utils/index'; //时间格式化
import order from "./component/orders";
import operaList from "./component/operaList";
import { getDistributor } from "@/api/shopglist";
export default {
  components: {
    templateTable,
    datail,
    exImport,
    organization,
    operaList,
    order,
    coupon,
    redpacket,
    point,
    bankInfoList,
    addressList,
    frequentlyPurchasedList,
    TableLee,
  },
  data() {
    // 自定义表单校验规则
    var checkyear = (rule, value, callback) => {
      console.log('checkyear typeof value:', typeof value, value);
      if (typeof value != 'object') {
        return callback(new Error('年份不能为空'));
      }
      // 如果校验通过，调用callback()即可
      callback();
    };
    var checksuperiorDealer = (rule, value, callback) => {
      console.log('checksuperiorDealer typeof value:', typeof value, value);
      if (typeof value != 'object') {
        return callback(new Error('经销商不能为空'));
      }
      // 如果校验通过，调用callback()即可
      callback();
    };
    var checkradioValue = (rule, value, callback) => {
      console.log('checkradioValue typeof value:', typeof value, value);
      if (typeof value != 'number') {
        return callback(new Error('所属渠道必选'));
      }
      // 如果校验通过，调用callback()即可
      callback();
    };

    var checkCheckList = (rule, value, callback) => {
      console.log('checkCheckList typeof value:', typeof value, value);
      if (value.length === 0) {
        return callback(new Error('至少要勾选一种任务'));
      }
      // 如果校验通过，调用callback()即可
      callback();
    };
    return {
      pointerEvents: 'auto',//默认不禁用表格鼠标事件
      // 安全表格固定数据;ID: 6
      SafetyTableData: {
        tdRows: 9,//除表头的tbody所占行数
        title: {
          isShow: false,
          value: '李向阳封装的无序表格',
        },
        // 表头
        ths: [
          {
            thName: '2024年',
            colspan: 1,
            rowspan: 1,
            isEdit: false,
            width: '100px',
            fontSize: 'large',
            htmlStr: {
              isShow: false,
              value: '&nbsp;'
            },
          },
          {
            thName: '季度任务（含缺货、关账发货）',
            colspan: 4,
            rowspan: 1,
            isEdit: false,
            width: '100px',
            height: '40px',
            fontSize: 'large',
            // backgroundColor: '#fff',
            // color: '#0099ff',
            input: { isShow: false, value: 0, type: 'number', placeholder: '请输入', step: 0.01, color: '#000' },
          },
          {
            thName: '产品大类任务（关账销量）',
            colspan: 5,
            rowspan: 1,
            isEdit: false,
            width: '100px',
            fontSize: 'large',
          },
          {
            thName: '单位：元',
            colspan: 1,
            rowspan: 1,
            isEdit: false,
            width: '100px',
            fontSize: '16px',
          },
        ],
        // 表体
        tds: [
          //表体单元格充当第2行表头
          [
            // 表体单元格充当左上角空格
            {
              tdName: '1', colspan: 1, rowspan: 3, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: '#0099ff',
              // input: { isShow: true, value: 0, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'red' },
              htmlStr: { isShow: true, value: '&nbsp;' },
            },
            // 表体单元格充当第一行表头:一个小技巧，每一行的高度取决于最高的单元格的高度，因此写一个height就行了
            { tdName: '一季度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', height: '40px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '二季度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '三季度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '四季度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: 'PPR', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: 'PVC', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '新风', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '暖通大类', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '防水', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '年度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
          ],
          // 表体单元格充当第3行数据行
          [
            {
              tdName: '1', colspan: 1, rowspan: 1, isEdit: false, width: '100px', height: '30px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#d79c21',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            // 注意：禁用输入框的情况下背景颜色才生效
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第4行数据行
          [
            {
              tdName: '1', colspan: 1, rowspan: 1, isEdit: false, width: '100px', height: '30px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 1, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第5行数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '签约任务', colspan: 1, rowspan: 1, isEdit: false, width: '100px', height: '30px', fontSize: 'small', fontWeight: '700', color: '#000',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
          ],
          // 表体单元格充当第6行数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '提前锁单', colspan: 1, rowspan: 1, isEdit: false, width: '100px', height: '30px', fontSize: 'small', fontWeight: '700', color: '#000',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 11, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第7行数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '特殊申请', colspan: 1, rowspan: 1, isEdit: false, width: '100px', height: '30px', fontSize: 'small', fontWeight: '700', color: '#000',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 11, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第8数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '季度完成量', colspan: 1, rowspan: 1, isEdit: false, width: '100px', height: '30px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
          ],
          // 表体单元格充当第9行数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '差额', colspan: 1, rowspan: 1, isEdit: false, width: '100px', height: '30px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
            },
          ],
        ],
      },


      checkList: [1, 2, 3],//复选框组最终绑定值
      checkboxOptions: [{
        label: '年度任务',
        value: 1,
        disabled: false, // 是否禁用
      },
      {
        label: '季度任务',
        value: 2,
        disabled: false
      },
      {
        label: '品类任务',
        value: 3,
        disabled: false,
      }],
      //表单数据初始化
      ruleForm: {
        year: {//年份 
          value: "2023",
          label: "2023年"
        },
        superiorDealer: { // 经销商名称
          value: "00",
          label: "11"
        },
        radioValue: 0,
      },
      ruleForm2: {
        checkList: [1, 2]//复选框组 
      },
      //自定义校验规则和简单表单验证
      rules1: {
        //自定义校验规则
        year: [
          { required: true, validator: checkyear, trigger: 'blur' }
        ],
        superiorDealer: [
          { required: true, validator: checksuperiorDealer, trigger: 'blur' }
        ],
        radioValue: [
          { required: true, validator: checkradioValue, trigger: 'blur' }
        ],
      },
      //自定义校验规则和简单表单验证
      rules2: {
        //自定义校验规则
        checkList: [
          { required: true, validator: checkCheckList, trigger: 'blur' }
        ],
      },
      radioOption: [//渠道
        {
          value: 0,
          label: '民用渠道',
        },
        {
          value: 1,
          label: '工程渠道',
        },
      ],
      yearList: [{//年份列表
        value: {
          value: '2023',
          label: '2023年'
        },
        label: '2023年'
      },
      {
        value: {
          value: '2024',
          label: '2024年'
        },
        label: '2024年'
      }],
      superiorDealerList: [{//上级经销商列表
        value: {
          value: '00',
          label: '11'
        },
        label: '00'
      },],

      basicInfo: {},
      userinfoCode: "",
      activeName: "first",
      dialogInfoVisible2: false,
      dialogInfoVisible3: false,
      dialogInfoVisible: false,
      visible: false,
      exVisible: false,
      rowInfo: {},
      queryList: [],
      dealerList: [],
      selUrl: '/web/reb/memjob/queryMemjobPage.json',//"/web/um/userDealer/queryUserDealerPageByUser.json"
      temInput: [
        {
          label: "客户名称",
          type: "text",
          name: "memberMname",
          value: "",
          placeholder: "请输入客户名称",
        },
        {
          label: "客户编号",
          type: "text",
          name: "userinfoConPhone",
          value: "",
          placeholder: "请输入客户编号",
        },
        // {
        //   label: "联系人",
        //   type: "text",
        //   name: "userinfoCon",
        //   value: "",
        //   placeholder: "请输入联系人",
        // },

        // {
        //   label: "DMS编码",
        //   type: "text",
        //   name: "userinfoOcode",
        //   value: "",
        //   placeholder: "请输入DMS编码",
        // },
        // {
        //   label: "邮箱",
        //   type: "text",
        //   name: "userinfoEmail",
        //   value: "",
        //   placeholder: "请输入邮箱",
        // },
        // {
        //   label: "地推DSR名称",
        //   type: "text",
        //   name: "employeeName",
        //   value: "",
        //   placeholder: "请输入地推DSR名称",
        // },
        // {
        //   label: "审核通过时间",
        //   type: "datetimerange",
        //   value: "",
        //   rangeSeparator: "-", // 可选值，默认为至
        //   startPlaceholder: "开始日期", // 可选值，默认是为开始时间
        //   name: "gmtModifiedQstart,gmtModifiedQend",
        //   endPlaceholder: "结束日期",
        // },
        // {
        //   label: "入驻状态",
        //   type: "select",
        //   name: "isLogin",
        //   value: "",
        //   placeholder: "请选择入驻状态",
        //   options: [
        //     {
        //       label: "全部",
        //       value: "",
        //     },
        //     {
        //       label: "已入驻",
        //       value: "1",
        //     },
        //     {
        //       label: "未入驻",
        //       value: "0",
        //     },
        //   ],
        // },
        // {
        //   label: "门店类型",
        //   type: "select",
        //   name: "qualityQtypeCode",
        //   value: "",
        //   props: {
        //     label: "qtypeQtypeName",
        //     value: "qualityQtypeCode",
        //   },
        //   placeholder: "请选择门店类型",
        //   url: "/web/um/qualityQtype/querySaveDealerQualityQtypePage.json",
        //   options: [],
        // },
        // {
        //   label: "是否下单",
        //   type: "select",
        //   name: "ifUserinfoOrderStr",
        //   value: "",
        //   placeholder: "请选择是否下单",
        //   options: [
        //     {
        //       label: "全部",
        //       value: "",
        //     },
        //     {
        //       label: "是",
        //       value: "1",
        //     },
        //     {
        //       label: "否",
        //       value: "0",
        //     },
        //   ],
        // },
        // {
        //   label: "所属经营部",
        //   type: "text",
        //   name: "departName",
        //   value: "",
        //   placeholder: "请输入所属经营部",
        // },
        {
          btnArray: [
            {
              type: "primary",
              id: "search",
              label: "查询",
              url: "",
            },
            {
              type: "primary",
              id: "addTask",
              label: "新增",
              url: "",
            },
            // {
            //   type: "primary",
            //   id: "adds",
            //   label: "新增"
            // },
            // {
            //   type: "primary",
            //   id: "exImportData",
            //   label: "导出",
            //   url: "web/um/userDealer/queryUserDealerPageByUser.json",
            // },
          ],
        },
      ],
      temInput1: [
        {
          label: "审核通过时间",
          type: "datetimerange",
          value: "",
          rangeSeparator: "-", // 可选值，默认为至
          startPlaceholder: "开始日期", // 可选值，默认是为开始时间
          name: "gmtModifiedQstart,gmtModifiedQend",
          endPlaceholder: "结束日期",
        },
        {
          label: "入驻状态",
          type: "select",
          name: "isLogin",
          value: "",
          placeholder: "请选择",
          options: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "已入驻",
              value: "1",
            },
            {
              label: "未入驻",
              value: "0",
            },
          ],
        },
        {
          label: "是否下单",
          type: "select",
          name: "ifUserinfoOrderStr",
          value: "",
          placeholder: "请选择",
          options: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "0",
            },
          ],
        },
        // {
        //   name: "userinfoCode",
        //   value: sessionStorage.getItem("userinfoCodes"),
        // },
        {
          btnArray: [
            {
              type: "primary",
              id: "search",
              label: "查询",
              url: "",
            },
            // {
            //   type: "primary",
            //   id: "adds",
            //   label: "新增"
            // },
            {
              type: "primary",
              id: "exImportData",
              label: "导出",
              url: "/web/um/userDealer/storeExcel.json",
            },
          ],
        },
      ],
      temTable: {
        // selection: {
        //   state: true,
        //   params: []
        // },
        tableHead: [
          {
            prop: "",
            label: "任务年份",
          },
          {
            prop: "",
            label: "任务名称",
          },
          {
            prop: "",
            label: "用户名称",
          },
          {
            prop: "",
            label: "用户编号",
          },
          {
            prop: "",
            label: "渠道类型",
          },
          {
            prop: "",
            label: "年任务进度",
          },
          {
            prop: "",
            label: "一季度",
          },
          {
            prop: "",
            label: "二季度",
          },
          {
            prop: "",
            label: "三季度",
          },
          {
            prop: "",
            label: "四季度",
          },
          // {
          //   prop: 'userinfoFeestatus',
          //   label: '保证金缴纳',
          //   template: {
          //     '1': '已缴纳',
          //     "0": '未缴纳',
          //   }
          // },
          // {
          //   prop: 'qualityAmt',
          //   label: '保证金金额',
          // },
          // {
          //   prop: "userinfoCon",
          //   label: "联系人",
          // },
          // {
          //   prop: "userinfoConPhone",
          //   label: "电话号码",
          // },
          // {
          //   prop: "dataState",
          //   label: "状态",
          //   template: {
          //     "-1": "停用",
          //     0: "启用",
          //     1: "待审核",
          //     3: "审核拒绝",
          //   },
          // },
          // {
          //   prop: "",
          //   label: "包装标签",
          // },
          // {
          //   prop: "gmtCreate",
          //   label: "创建日期",
          //   template: "format",
          // },
          // {
          //   prop: "gmtModified",
          //   label: "修改日期",
          //   template: "format",
          // },
        ],
        tableBtn: [
          {
            label: "查看明细",
            state: true,
            id: "showTaskDetail",
          },
          {
            label: "删除",
            state: true,
            id: "deleteRow",
            type: 'danger'
          },
          // {
          //   label: "查看",
          //   state: true,
          //   id: "showDetail",
          // },

          // {
          //   label: "启用",
          //   state: false,
          //   prompt: "true", // 可选参数，为false不显示提示框
          //   promptTitle: "确定启用该门店？",
          //   params: {
          //     // 单单只对停用启用有效
          //     userinfoId: "", // 当前条数据code/id
          //   },
          //   dataState: "-1", // 状态参数
          //   id: "open",
          //   url: "/web/um/userDealer/enableUserDealerByUser.json",
          // },

          // {
          //   label: "禁用",
          //   state: false,
          //   promptTitle: "确定停用该门店？",
          //   prompt: "true", // 可选参数，为false不显示提示框
          //   params: {
          //     // 单单只对停用启用有效
          //     userinfoId: "", // 当前条数据code/id
          //   },
          //   props: {
          //     dataState: "dataState",
          //   },
          //   dataState: "0", // 状态参数
          //   url: "/web/um/userDealer/stoppedUserDealerByUser.json",
          //   id: "stop", // 表示重置类型是一样的
          // },
          // {
          //   label: "查看订单",
          //   state: false,
          //   props: {
          //     dataState: "dataState",
          //   },
          //   dataState: "-1,0,1",
          //   id: "seeOrder",
          // },
          // {
          //   label: "包装标签",
          //   state: true,
          //   id: "tag",
          // },
        ],
      },
    };
  },

  // created() {
  //   console.log("初始化1111");

  //   if (sessionStorage.getItem("userinfoCodes")) {
  //     console.log("初始化1111");
  //     this.getDatas();
  //   } else {
  //     console.log(this.selUrl, "2222");
  //     this.$nextTick(() => {
  //       this.$refs.template.getDataList(this.selUrl);
  //     });
  //   }
  // },
  mounted() {
    let date = new Date()
    console.log('date:', date);
    let year = date.getFullYear()
    console.log('year:', year);
    this.ruleForm.year = {//初始化显示当前年份 
      value: year,
      label: year + '年'
    }
    this.yearList = []//年份列表
    //今年起，往后20年，一共20年的时间
    for (let i = 0; i < 20; i++) {
      this.yearList.push({
        value: {
          value: year + i,
          label: year + i + '年'
        },
        label: year + i + '年'
      })
    }

    //查询上级经销商列表：也就是审核通过的用户
    globalAPI.queryUserinfoapplyPage({
      dataState: 1
    }).then(res => {
      console.log('查询上级经销商列表：也就是审核通过的用户:', res);
      if (Array.isArray(res.list) && res.list.length > 0) {
        this.ruleForm.superiorDealer = {//初始化显示
          value: res.list[0].userinfoapplyCode,
          label: res.list[0].userinfoCompname,
        }
        this.superiorDealerList = res.list.map(item => {
          return {
            value: {
              value: item.userinfoapplyCode,
              label: item.userinfoCompname,
              dataSources: item,
            },
            label: item.userinfoCompname
          }
        })
      }
    })
  },
  // beforeRouteLeave(to, from, next) {
  //   if (sessionStorage.getItem("userinfoCodes")) {
  //     sessionStorage.removeItem("userinfoCodes");
  //   }
  //   // debugger;
  //   next();
  // },
  methods: {
    // 关闭此页面的对话框
    closeCurrDilog() {
      this.dialogInfoVisible = false
    },
    formatData(h, item) {
      console.log(5454455, item.dataState);
      if (item.dataState == 1) {
        return <span style="marginLeft:20%">--</span>
      } else {
        return <div>{parseTime(item.gmtModified)}</div>
      }

    },
    // getDatas() {
    //   if (sessionStorage.getItem("userinfoCodes")) {
    //     this.temInput = this.temInput1;

    //     this.selUrl =
    //       "/web/um/userDealer/queryUserDealerPageByUser.json?userinfoCode=" +
    //       sessionStorage.getItem("userinfoCodes");
    //     console.log(this.selUrl, "2222");

    //     this.$nextTick(() => {
    //       this.$refs.template.getDataList(this.selUrl);
    //     });
    //   }
    // },
    loginState(h, item) {
      if (item.userinfoLoginf) {
        return <div>已入驻</div>;
      } else {
        return <div>未入驻</div>;
      }
    },
    userinfoOrder(h, item) {
      if (item.userinfoOrder >= 1) {
        return <div>是</div>;
      } else {
        return <div>否</div>;
      }
    },

    handleClick(tab, event) {
      this.activeName = tab.name;
      console.log(tab, event);
    },
    inputBtnClick(data, item, index) {
      if (data.id == "exImports") {
        this.exVisible = true;
      } else if (data.id == "adds") {
        this.$router.push({
          path: "/addDealarStore",
        });
      }
      // 新增任务
      else if (data.id == 'addTask') {
        // alert('addTask')
        this.dialogInfoVisible3 = true
      }
    },

    tableBtnClick(data, item, index) {
      console.log('操作列：', data, item, index);

      this.userinfoCode = data.userinfoCode;
      if (item.id === "showTaskDetail") {
        this.dialogInfoVisible2 = true
      }
      if (item.id === "deleteRow") {
        this.$confirm('此操作将永久删除', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(_ => {
          globalAPI.deleteFalgSetting({ memjobId: data.memjobId }).then(res => {
            console.log('res:', res);
            if (res.success == true) {
              this.$message({ type: 'success', message: '成功删除' });
              console.log('用来直接操作子组件this.$refs:', this.$refs);
              this.$refs.refTemTable2.getDataList(this.selUrl2);
            } else {
              this.$message({ message: res.msg, type: 'warning' });
            }
          }).catch(err => {
            console.log('err:', err);
            this.$message.error('删除出错');
          })
        }).catch(_ => {
          this.$message({ type: 'info', message: '您已取消删除' });
        });
      }
      if (item.id === "showDetail") {
        // this.showDetail(data);
        if (
          data.umUserinfoQuaDomainList &&
          data.umUserinfoQuaDomainList.length > 0
        ) {
          let level = "";
          data.umUserinfoQuaDomainList.map((val) => {
            if (val.userinfoQuaKey == "levelListCode_dealer") {
              level = val.userinfoQuaVaule1 || "普通";
            }
          });
          data.userinfoLevel = level;
        }

        this.rowInfo = data;
        this.userinfoId = data.userinfoId;
        this.userinfoCode = data.userinfoCode;
        this.userinfoChannelName = data.userinfoParentName;
        this.activeName = "first";

        getDistributor({ userinfoCode: data.userinfoCode })
          .then((res) => {
            this.basicInfo = res;
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });

        this.dialogInfoVisible = true;
        // setTimeout(() => {
        //   this.$refs.selectfood.details(item.userinfoId);
        // }, 200);
      }
      if (item.id == "seeOrder") {
        // console.log(this.userinfoCode,data.userinfoCode,'111')
        if (this.userinfoCode) {
          console.log(this.userinfoCode, data.userinfoCode, "2222");
          if (localStorage.getItem("saas-tenantcode") == "2021120700000094") {
            window.location.href =
              process.env.API_ROOT +
              "/paas/order-manager/index.html#/dealerOrdeListBl?userinfoCode=" +
              this.userinfoCode;
          } else {
            window.location.href =
              process.env.API_ROOT +
              "/paas/order-manager/index.html#/dealerOrdeListPg?userinfoCode=" +
              this.userinfoCode;
          }
        }
      }
    },
    closed() {
      this.dialogInfoVisible = false;
      this.userinfoCode = "";
      console.log(this.userinfoCode, "userinfoCode");
    },
    closed2() {
      this.dialogInfoVisible2 = false;
    },
    closed3() {
      this.dialogInfoVisible3 = false;
    },
    extoggleVisible(arg) {
      this.exVisible = arg;
    },
    addTask(formRefNameList) {
      //第一个表单组件的验证
      this.$refs[formRefNameList[0]].validate((valid) => {
        console.log('valid:', valid);

        if (valid) {
          // this.$message.success('表单验证成功');
          console.log('this.ruleForm:', this.ruleForm);

          //第2个表单组件的验证
          this.$refs[formRefNameList[1]].validate((valid2) => {
            console.log('valid2:', valid2);

            if (valid) {
              this.$message.success('表单验证成功');
              console.log('this.ruleForm2:', this.ruleForm2);

            } else {
              this.$message.error('请检查表单');
              return false;
            }
          });

        } else {
          this.$message.error('请检查表单');
          return false;
        }
      });
    },
    checkboxChange(val) {
      console.log('val:', val);
      console.log('this.checkList:', this.checkList);
    },
  },
};
</script>
<style lang="scss" scoped>
.title1 {
  color: #0099ff;
  font-size: large;
  font-weight: bold;
  padding-left: 1%;
}
</style>
